<template>
    <div>
        <van-dropdown-menu>
            <van-dropdown-item
                title="综合"
                v-model="value1"
                :options="option1"
                @change="change(value1)"
            />
            <van-dropdown-item
                title="价格"
                v-model="value2"
                :options="option2"
                @change="change(value2)"
            />
            <van-dropdown-item
                title="分类"
                v-model="categoryVal"
                :options="option3"
                @change="categoryChange"
            />
        </van-dropdown-menu>
        <van-empty
            v-if="goodsList.length == 0"
            image="search"
            description="抱歉，搜索不到产品"
        />
        <Products v-else :goodsList="goodsList" />
    </div>
</template>

<script>
import Products from "../search/Products";
import { GetSearchData } from "../../request/api";
export default {
    data() {
        return {
            // isEmpty: false,
            goodsList: [],
            categoryVal: "",
            value2: "",
            value1: "",
            option2: [
                { text: "价格从高到低", value: "a" },
                { text: "价格从低到高", value: "b" },
            ],
            option1: [{ text: "综合排序", value: "c" }],
            option3: [],
        };
    },
    components: {
        Products,
    },
    props: ["goodsList", "searchVal", "filterCategory"],
    methods: {
        //价格排序的请求
        change(val) {
            if (val == "a") {
                this.getData("desc", this.categoryVal);
                this.value1 = "";
            } else if (val == "b") {
                this.value1 = "";
                this.getData("asc", this.categoryVal);
            } else if ((val = "c")) {
                this.value2 = "";
                this.getData("asc", this.categoryVal, null);
            }
        },
        //封装的请求函数
        getData(type, categoryId = "0", sort = "price") {
            GetSearchData({
                keyword: this.searchVal,
                size: 50,
                order: type,
                sort: sort,
                categoryId,
            }).then((res) => {
                console.log(res);
                this.goodsList = res.data.data.goodsList;
            });
        },
        //派发的自定义事件，派送当前点击的分类id
        categoryChange(value) {
            // 就是分类id ，尝试在本组件更改数据，但是beforeUpdate函数里无法更改，所以传给父组件改值
            this.$emit("categoryChange", value);
        },
    },
    // updated() {
    //     if (this.goodsList.length == 0) {
    //         this.isEmpty = true;
    //     }
    // },
    beforeUpdate() {
        // 数据挂载完毕， 遍历filterCategory数组，看看哪一项的checked为true，
        // 遍历的时候 遇到checked为true时，就把  this.categoryVal 改成它的value值，这样这一项就被勾上了
        // setTimeout(()=>{
        this.option3 = this.filterCategory;
        this.filterCategory.map((item) => {
            // 如果item的checked为true，就改this.categoryVal
            if (item.checked) {
                this.categoryVal = item.value;
                return;
            }
        });
        // },60)
    },
};
</script>